<template>
  <avue-crud :data="logList || []" :option="option">
    <template slot-scope="scope" slot="type">
      <el-tag type="danger" size="small">{{ scope.label }}</el-tag>
    </template>
    <template slot-scope="props" slot="expand">
      <pre class="code">{{ props.row.stack }}</pre>
    </template>
  </avue-crud>
</template>

<script>
import store from '@/store'
export default {
  name: 'ErrorLogs',
  data() {
    return {
      option: {
        menu: false,
        addBtn: false,
        page: false,
        border: true,
        expand: true,
        rowKey: 'index',
        refreshBtn: false,
        columnBtn: false,
        headerAlign: 'center',
        column: [
          {
            label: '类型',
            prop: 'type',
            width: 80,
            align: 'center',
            slot: true,
            dicData: [{ label: 'bug', value: 'error' }]
          },
          { label: '地址', width: 200, prop: 'url', overHidden: true },
          { label: '内容', prop: 'message', overHidden: true },
          { label: '错误堆栈', prop: 'stack', hide: true },
          { label: '时间', align: 'center', prop: 'time', width: 200 }
        ]
      }
    }
  },
  props: ['logList'],
  methods: {
    async send() {
      try {
        const action = await this.$confirm('确定上传本地日志到服务器?', '提示', { type: 'warning' })
        if (action !== 'confirm') return
        store.dispatch('SendLogs').then(() => {
          this.$emit('update:visible', false)
          this.$message.success('发送成功!')
        })
      } catch (error) {
        console.log(error)
      }
    },
    async clear() {
      try {
        const action = await this.$confirm('确定清空本地日志记录?', '提示', { type: 'warning' })
        if (action !== 'confirm') return
        store.commit('CLEAR_LOGS')
        window.console.log(this)
        this.$emit('update:visible', false)
        this.$message.success('清空成功!')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.code {
  font-size: 12px;
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
}
</style>
